<template>
  <div class="dialog-wrapper">
    <Modal
      :title="title"
      footer-hide
      :value="value"
      @on-cancel="handleCancel">
      <Form
        ref="form"
        :model="form"
        :rules="rules"
        :label-width="120">
        <FormItem :label="this.$t('m.picture')" prop="imgUrl">
          <div class="priview" v-if="form.imgUrl">
            <img :src="form.imgUrl" alt="" class="priview-image">
          </div>
          <Upload
            ref="upload"
            :format="['jpg','jpeg','png']"
            accept="image/jpeg,image/png"
            action=""
            :show-upload-list="false"
            :before-upload="handleBeforeUpload"
            >
            <Button icon="ios-cloud-upload-outline" :loading="btnLoading">{{$t('m.scImg')}}</Button>
          </Upload>
        </FormItem>
        <FormItem :label="this.$t('m.title')"  prop="name">
          <Input v-model="form.name" type="text" :placeholder="$t('m.qǐngshūrùbiāotí')" :disabled="type === 'u'" />
        </FormItem>
        <FormItem :label="this.$t('m.linkurl')" prop="linkUrl">
          <Input v-model="form.linkUrl" type="text" :placeholder="$t('m.qǐngshūrùliànjiē')" prop="linUrl"/>
        </FormItem>
        <FormItem :label="this.$t('m.shunxu')"  prop="sort">
          <Input v-model="form.sort" type="text" :placeholder="$t('m.qǐngshūrùshùnxù')" number />
        </FormItem>
        <FormItem :label="this.$t('m.dlqdId')" prop="dcIdRule">
          <Input v-model="form.dcId" type="text" :placeholder="$t('m.qǐngshūrùdǎoliúqúdàoID')" number />
        </FormItem>
        <FormItem :label="this.$t('m.sfZahnshi')"  prop="status">
          <RadioGroup v-model="form.status">
            <Radio :label="1">{{$t('m.zs')}}</Radio>
            <Radio :label="0">{{$t('m.nzs')}}</Radio>
          </RadioGroup>
        </FormItem>
          <FormItem :label="this.$t('m.dǎkāifāngshì')">
              <RadioGroup v-model="form.openType">
                  <Radio :label="'in'">App</Radio>
                  <Radio :label="'out'">Web</Radio>
              </RadioGroup>
          </FormItem>
        <FormItem :label="this.$t('m.remarkCo')"  prop="desc">
          <Input v-model="form.remark" type="textarea" :placeholder="$t('m.qǐngshūrùbèizhù')" />
        </FormItem>
        <FormItem>
          <Button type="primary"  @click="handleSubmit" :loading="btnLoading" >{{$t('m.submit')}}</Button>
        </FormItem>
      </Form>
    </Modal>
  </div>
</template>

<script>
  import qs from 'qs';
  export default {
      btnLoading:false,
    name: 'modalOperator',
    props: {
      title: String,
      type: String,
      value: {
        type: Boolean,
        default: false
      },
      formData: {
          type: Object,
          default: {
          img: '',
          name: '',
          link: '',
          sort: '',
          status: '',
          type: '',
          dcId: '',
          desc: ''
        }
      }
    },
    data () {
      const validateNumber = (rule, value, callback) => {
        if (!Number.isInteger(value)) {
          callback(new Error('请输入数字'));
        } {
          callback();
        }
      }
      return {
        idFlag: false,
        btnLoading: false,
        imgs: '',
        form: {
            imgUrl: '',
        },
        dcIdRule: [
          { type: 'number', required: true, message: '请输入数字', trigger: 'blur' },
          { validator: validateNumber, trigger: 'blur' }
        ],
        rules: {
          imgUrl: [
            { required: true, message: '请上传图片', trigger: 'change' }
          ],
          name: [
            { required: true, message: '请输入标题', trigger: 'blur' }
          ],
          linkUrl: [
            { required: true, message: '请输入链接', trigger: 'blur' }
          ],
          sort: [
            { type: 'number', required: true, message: '请输入数字', trigger: 'blur' },
            { validator: validateNumber, trigger: 'blur' }
          ],
          status: [
            { required: true, type: 'number', message: '请选择是否展示', trigger: 'change' }
          ],
          remark: [
            { required: true, message: '请输入备注', trigger: 'blur' }
          ]
        }
      }
    },
    watch: {
      value (newValue) {
        if (newValue) {
          let {ctime,utime, ...formDatas} = this.formData;
          this.form = formDatas;
        }
      },
      'form.type' (newVal) {
        if (newVal === 'diversion') {
          this.idFlag = true;
          this.rules.dcId =  this.dcIdRule;
        } else {
          this.idFlag = false;
          this.rules.dcId = [];
        }
      }
    },
    methods: {
      // 图片上传前的钩子函数
      handleBeforeUpload (file) {
        const reg = /^(image\/bmp|image\/gif|image\/jpeg|image\/png|image\/tiff)$/i;

        if (!reg.test(file.type)) return this.$Message.error(this.$t('m.zhǐnéngshàngchuánjpgjpegpnggéshìdetúpiàn'));
        if (this.imgs.length > 1) return this.$Message.error(this.$t('m.zuìduōshàngchuán1zhāngtúpiàn'));
        const reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = (e) => {
          let result = e.target.result;

          this.form.imgUrl = result
        }

        reader.onerror = (e) => {
          this.$Message.error(this.$t('m.túpiànzhuǎnchéngbase64cuòwù'));
        }

        return false;
      },
      uploadImage (value) {
        this.btnLoading = true;
        this.$http.post('/helsinki/admin/basic/uploadImgs', qs.stringify({
          imgs: value
        }))
        .then(({ data: { errcode, info, data } }) => {
          if (errcode == 0) {
            this.$Message.success('上传图片成功');
            this.form.img = data[0];
          }
          this.btnLoading = false;
        }, error => {
          this.btnLoading = false;
        });
      },
      // 表单提交
      handleSubmit () {
          this.btnLoading = true
        const { form } = this.$refs;
        form.validate(valid => {
          if (valid) {
            if (this.form.type === 'update') { this.form.dcId = '' };
            this.$http.post(`/api/laocai/sys/banner/${this.type}`, {
              ...this.form
            }).then((res) => {
              if (res.body.code == 0) {
                  this.btnLoading = false
                let message = this.type == 'a' ? '添加banner成功' : '编辑banner成功';
                this.$Message.success(message);
                this.$emit('ok');
                this.$router.push('/blank')
              }else {
                  this.btnLoading = false
                  this.$Message.success(this.$t('m.errorCode' + res.body.code));
              }
            });
          }
        })
      },
      handleCancel () {
        this.$refs.form.resetFields();
        this.$emit('input', false);
      }
    }
  }
</script>

<style lang="scss">
  .ivu-form .ivu-form-item-label {
    margin-bottom: 0;
  }

  .ivu-radio-wrapper {
    margin-bottom: 0;
  }

  .priview {
    margin-bottom: 10px;
    .priview-image {
      max-height: 60px;
    }
  }
</style>
